<template>
    <div>
        <div class="tip">
            <div><b>网站说明：</b></div>
            <div>1. 统计数据是真实的，一分钟左右延时。</div>
            <div>2. 有文档被点赞会收到实时通知哦！</div>
            <div>3. 左侧菜单是动态加载的，登录后在分类管理可配置</div>
            <div>4. 文档树可无限级扩展，支持文字、图片、<b>视频</b></div>
        </div>
        <!-- 总阅读量、总点赞量、点赞率（各占24栅格中的8格） -->
        <a-row>
            <a-col :span="24">
                <!-- 用卡片组件进行包边 -->
                <a-card>
                    <!-- 栅格布局 结合 Statistic统计数值组件 -->
                    <a-row>
                        <a-col :span="8">
                            <a-statistic title="总阅读量" :value="statistic.viewCount">
                                <template #suffix>
                                    <eye-outlined />
                                </template>
                            </a-statistic>
                        </a-col>
                        <a-col :span="8">
                            <a-statistic title="总点赞量" :value="statistic.voteCount">
                                <template #suffix>
                                    <like-outlined />
                                </template>
                            </a-statistic>
                        </a-col>
                        <a-col :span="8">
                            <a-statistic title="点赞率"
                                         :value="statistic.voteCount / statistic.viewCount * 100"
                                         :precision="2"
                                         suffix="%"
                                         :value-style="{ color: '#cf1322' }"
                            />
                        </a-col>
                    </a-row>
                </a-card>
            </a-col>
        </a-row>
        <br/>
        <!-- 今日阅读量、今日点赞量、预计今日阅读量、预计今日阅读增长 -->
        <a-row :gutter="16">
            <!-- 左边： 今日阅读量、今日点赞量 ，整体占12栅格 -->
            <a-col :span="12">
                <a-card>
                    <a-row>
                        <a-col :span="12">
                            <a-statistic title="今日阅读" :value="statistic.todayViewCount">
                                <template #suffix>
                                    <eye-outlined />
                                </template>
                            </a-statistic>
                        </a-col>
                        <a-col :span="12">
                            <a-statistic title="今日点赞" :value="statistic.todayVoteCount">
                                <template #suffix>
                                    <like-outlined />
                                </template>
                            </a-statistic>
                        </a-col>
                    </a-row>
                </a-card>
            </a-col>
            <!-- 右边： 今日阅读量、今日点赞量，整体占12栅格  -->
            <a-col :span="12">
                <a-card>
                    <a-row>
                        <a-col :span="12">
                            <a-statistic title="预计今日阅读"
                                         :value="statistic.todayViewIncrease"
                                         :value-style="{ color: '#0000ff' }"
                            >
                                <template #suffix>
                                    <eye-outlined />
                                </template>
                            </a-statistic>
                        </a-col>
                        <a-col :span="12">
                            <a-statistic title="预计今日阅读增长"
                                         :value="statistic.todayViewIncreaseRateAbs"
                                         :precision="2"
                                         suffix="%"
                                         :value-style="statistic.todayViewIncreaseRate < 0 ? { color: '#3f8600' } : { color: '#cf1322' }"
                            >
                                <template #prefix>
                                    <arrow-down-outlined v-if="statistic.todayViewIncreaseRate < 0"/>
                                    <arrow-up-outlined v-if="statistic.todayViewIncreaseRate >= 0"/>
                                </template>
                            </a-statistic>
                        </a-col>
                    </a-row>
                </a-card>
            </a-col>
        </a-row>
        <br/>
        <a-row>
            <!-- 下面的栅格不写满24，因为下面配置宽度100%，测试下来，刷新页面会有点超宽，本地调试动态部署倒是正常，原因不明，故先设置为20，保证不会出现横向滚动条 -->
            <a-col :span="20">
                <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
                <div id="main" style="width:100%; height:300px;"></div>
            </a-col>
        </a-row>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
import axios from 'axios';

// echarts已经在index.html中引入了对应js文件了，可以直接用，但vue的TypeScript还不知道，编译会报错。用declare，告诉该文件，下面这个变量是存在的。
declare let echarts: any;

export default defineComponent({
    name: 'the-welcome',
    setup() {
        // 定义响应式变量：统计数值
        const statistic = ref();
        statistic.value = {};

        // 获取统计数值
        const getStatistic = () => {
            axios.get("/ebook-snapshot/get-statistic").then((response) => {
                const data = response.data ;
                if(data.success){
                    const statisticResp = data.content;

                    // 定义一个变量：昨日阅读数（在下面的不同分支，赋不同的值）
                    let yesterdayViewIncrease ;

                    if(statisticResp.length === 1){     // ---- 昨天没有统计数值 ---- [若昨日有数据，今日没数据，就拿昨日数据当今天，当前这种情况正常不会存在]
                        // console.log("昨日没有统计数值");
                        statistic.value.viewCount = statisticResp[0].viewCount;         // 总阅读数
                        statistic.value.voteCount = statisticResp[0].voteCount;         // 总点赞数
                        statistic.value.todayViewCount = statisticResp[0].viewIncrease;     // 今日阅读数（增量）
                        statistic.value.todayVoteCount = statisticResp[0].voteIncrease;     // 今日点赞数

                        // 避免后面运算"今日预计阅读增长率"时，分母没有值，初始化为1
                        yesterdayViewIncrease = 1 ;

                    } else if(statisticResp.length === 2){  // ---- 昨天有统计数值 ----
                        // console.log("昨日有统计数值");
                        statistic.value.viewCount = statisticResp[1].viewCount;         // 总阅读数
                        statistic.value.voteCount = statisticResp[1].voteCount;         // 总点赞数
                        statistic.value.todayViewCount = statisticResp[1].viewIncrease;     // 今日阅读数（增量）
                        statistic.value.todayVoteCount = statisticResp[1].voteIncrease;     // 今日点赞数

                        // 判断昨日阅读增长是否为0，为0则改为1（避免的运算"今日预计阅读增长率"时将0作为分母，得出错误结果Infinity）
                        yesterdayViewIncrease = statisticResp[0].viewIncrease===0 ? 1 : statisticResp[0].viewIncrease ;
                    } else {
                       // console.log("昨日和今日都没有统计数值");
                    }

                    // 按分钟计算当前时间点，占一天的百分比
                    const now = new Date();
                    const nowRate = (now.getHours() * 60 + now.getMinutes()) / (60 * 24); // 当天已过分总数占总时间的百分比
                    // 今日预计阅读数 = 当前今日阅读数 / 当天已过去的时间百分比
                    statistic.value.todayViewIncrease = parseInt(String(statistic.value.todayViewCount / nowRate));

                    // 今日预计阅读增长率 = （今日预计阅读数 - 昨日阅读数）/ 昨日阅读数
                    statistic.value.todayViewIncreaseRate = (statistic.value.todayViewIncrease - yesterdayViewIncrease) / yesterdayViewIncrease * 100 ;
                    statistic.value.todayViewIncreaseRateAbs = Math.abs(statistic.value.todayViewIncreaseRate) ;

                } else {
                    console.log("/ebook-snapshot/get-statistic error!, response: ", response);
                }
            });
        };

        // 绘制Echarts图表（测试用）
        const testEcharts = () => {
            // 基于准备好的dom，初始化echarts实例
            const myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            const option = {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                },
                yAxis: {},
                series: [
                    {
                    name: '销量',
                    type: 'bar',
                    data: [5, 73, 36, 10, 10, 20]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        };

        // 绘制图表（近30天的数值统计）
        const init30DayEcharts = (list: any) => {
            // console.log("statisticList", list) ;
            // 基于准备好的dom，初始化echarts实例
            const myChart = echarts.init(document.getElementById('main'));

            const xAxis = [] ;  // 横坐标
            const seriesView = [] ;  // 阅读量的数值数组
            const seriesVote = [] ;  // 点赞量的数值数组
            for(let i=0; i<list.length; i++){
                const record = list[i] ;
                xAxis.push(record.date) ;
                seriesView.push(record.viewIncrease) ;
                seriesVote.push(record.voteIncrease) ;
            }

            // 指定图表的配置项和数据
            const option = {
                title: {
                    text: '30天趋势图'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['阅读量', '点赞量']
                },
                grid: {
                    left: '1%',
                    right: '3%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                      saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xAxis
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                      name: '阅读量',
                      type: 'line',
                      // stack: 'Total',  //'总量', 这里是各自的数值，不用堆叠，要注掉
                      data: seriesView,
                      smooth: true
                    },
                    {
                      name: '点赞量',
                      type: 'line',
                      // stack: 'Total',  //'总量', 这里是各自的数值，不用堆叠，要注掉
                      data: seriesVote,
                      smooth: true
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        };

        // 获取近30天的数值统计
        const get30DayStatistic = () => {
            axios.get("/ebook-snapshot/get-30-statistic").then((response) => {
                const data = response.data ;
                if(data.success){
                    const statisticList = data.content;
                    init30DayEcharts(statisticList) ;
                } else {
                    console.log("/ebook-snapshot/get-30-statistic error!, response: ", response);
                }
            });
        };

        onMounted(() => {
            getStatistic() ;
            // testEcharts() ;
            get30DayStatistic() ;
        });

        // Echarts在开发环境中，组件切换二次渲染的时候可正常显示。打包放入nginx中，二次渲染不出来
        // 在组件卸载前，移除之前创建的Echarts实例属性
        onBeforeUnmount(() => {
            console.log("the-welcome.vue  onBeforeUnmount()....");
            const mainElement = document.getElementById('main') ;
            if(mainElement){
                mainElement.removeAttribute('_echarts_instance_');
            }
        });

        return {
            statistic
        };
    },

});
</script>
<style scoped>
.tip {
    padding: 10px 5px;
    margin-bottom: 20px;
    color: red;
    border: 1px solid transparent;
    background: linear-gradient(white,white) padding-box,repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0/.6em .6em;
  }

</style>
